<template>
  <div class="h-100 w-100">
    <div class="left_panel">
      <div class="btm_panel">
        <div class="panel-title"><b></b>最新地震活跃警示信息和矿井地压冲击事故预警<i></i></div>
           <div style="height: 81vh; overflow: auto;"> 
            <div  :class="activeID==item.id?'cont_panel active':'cont_panel'" @click="rowClick(item)" v-for="(item,index) in ssjs_list" :key=index :style="{height:active=='dz'?'6vh':active=='wz'?'10vh':'17vh'}">
              <div class="lft_img"></div>
              <div class="ct_panel">
                <div class="title">{{item.msg}}</div>
                <div class="ctitle" v-if="item.area">省份:{{item.area}}</div>
                <div class="ctitle" v-if="item.address">参考位置:{{item.address}}</div>
                <div class="ctitle" v-if="item.level">级别位置:{{item.level}}</div>
                <div class="ctitle" v-if="item.mk">受影响矿山:{{item.mk}}</div>
                <div class="ctitle" v-if="item.zjyx">直接影响范围:{{item.zjyx}}</div>
                <div class="ctitle" v-if="item.jjyx">间接影响范围:{{item.jjyx}}</div>
                <div class="ctitle" v-if="item.time">时间：{{item.time}}</div>
             </div>
          </div>
        </div>
      </div>
    </div>
    <div class="mid_panel">

    </div>
    <div class="right_panel">
      <div class="right_title" v-if="active=='dz'">1年内发生的地震信息</div>
      <div class="right_title"  v-if="active=='wz'">近期发生微震大能量事件</div>
      <div class="right_title"  v-if="active=='oh'">影响范围</div>
      <div v-if="active=='dz'">
        <div class="top_panel">
          <div class="cjdy_right_panel">
            <div class="box">
                <div class="bg ">0 <span>起</span></div>
                <div class="text">6.0级以上地震</div>
            </div>
            <div class="box">
                <div class="bg">6<span>起</span></div>
                <div class="text">5.0级以上地震</div>
            </div>
            <div class="box">
                <div class="bg">14<span>起</span></div>
                <div class="text">4.0级以上地震</div>
            </div>
            <div class="box">
                <div class="bg bg1">49<span>起</span></div>
                <div class="text">3.0级以上地震</div>
            </div>
            <div class="box">
                <div class="bg">7<span>起</span></div>
                <div class="text">3.0级以下地震</div>
            </div>
          </div>
        </div>
        <div class="cont_panel">
          <el-table
              class="mapTable dz"
              :data="tableData"
              :row-class-name="tableRowClassName">
            <el-table-column
                prop="level"
                align="center"
                label="震级(M)"
                width="84"
            >
            </el-table-column>
            <el-table-column
                prop="time"
                width="216"
                label="发震时刻"
            >
            </el-table-column>
            <el-table-column
              width="128"
                prop="address"
                label="具体位置">
            </el-table-column>
          </el-table>
        </div>
      </div>
      <div  v-if="active=='wz'">
        <div class="cont_panel" style="height:80vh;margin-top:3vh">
          <el-table
              class="mapTable wz"
              :data="tableData"
              :row-class-name="tableRowClassName">
            <el-table-column
                prop="area"
                align="center"
                label="煤矿名称"
                min-width="80"
            >
            </el-table-column>
            <el-table-column
                prop="time"
                min-width="120"
                label="发震时刻(UTC+8)"
            >
            </el-table-column>
            <el-table-column
              min-width="120"
                prop="address"
                label="具体位置">
            </el-table-column>
          </el-table>
        </div>
      </div>
      <div v-if="active=='oh'">
        <div class="top_panel" style="height:12vh">
          <div class="cjdy_right_panel">
            <div class="box" style="width:25%">
                <div class="bg ">{{ohNum.a}} <span>县</span></div>
                <div class="text">直接影响范围</div>
            </div>
            <div class="box" style="width:25%"> 
                <div class="bg">{{ohNum.b}}<span>县</span></div>
                <div class="text">间接影响范围</div>
            </div>
            <div class="box" style="width:25%">
                <div class="bg">{{ohNum.c}}<span>座</span></div>
                <div class="text">受影响矿山</div>
            </div>
            <div class="box" style="width:25%"> 
                <div class="bg bg1">{{ohNum.d}}<span>人</span></div>
                <div class="text">受影响人数</div>
            </div>
          </div>
        </div>
         <div class="echart-panel" style="margin-top:0">
              <div class="panel-title"><b></b>受影响矿山（{{ohNum.c}}座） <i></i></div>
              <div class="panel-content ">
                <div class="listPanel">
                  <div class="listRow" v-for="(item,index) in tlks_listDefault" :key=index>
                     {{item}}
                  </div>
                </div>
              </div>
            </div>
          <div class="echart-panel" style="height:38vh">
              <div class="panel-title"><b></b>周边历史地震/微震情况 <i></i></div>
              <div class="cont_panel " style="height: 28vh; width: 100%;margin-left: 0;">
                <div class="listPanel">
                    <el-table
                      class="mapTable  mapTable1 oh"
                      :data="tableData1"
                      :row-class-name="tableRowClassName">
                    <el-table-column
                        prop="level"
                        align="center"
                        label="震级(M)"
                        min-width="80"
                    >
                    </el-table-column>
                    <el-table-column
                        prop="time"
                        min-width="120"
                        label="发震时刻"
                    >
                    </el-table-column>
                     <el-table-column
                       min-width="120"
                        prop="address"
                        label="具体位置">
                    </el-table-column>
                    <el-table-column
                        prop="deep"
                        min-width="80"
                        label="深度(千米)" >
                      <template slot-scope="{row}">
                          {{row.deep||0}}
                      </template>
                    </el-table-column>
                   
                  </el-table>
                </div>
              </div>
          </div>
      </div>
    </div>
  </div>
</template>

<script>
import template from '../../public/vueTemplate/template.vue';
const pageName = "views_sgzz";
export default {
  components: { template },
  props:{
    vm:null,
  },
  name: pageName,
  data() {
    return {
      ssjs_list:[
          {"id":1,"area":"青海","address":"海西州茫崖市","lat":38.14,"lng":93.81,"level":5.8,"time":"2021年6月16日16时48分","msg":"青海海西州茫崖市发5.8级地震"},
          {"id":2,"area":"云南","address":"楚雄州双柏县","lat":24.34,"lng":101.91,"level":5.1,"time":"2021年6月10日19时46分","msg":"云南楚雄州双柏县发生5.1级地震"},
          {"id":"w1","area":"郭家河煤矿","lat":34.865332,"lng":107.549773,"address":"陕西宝鸡市","time":"2019/5/20","msg":"发生微震大能量事件"},
          {"id":"w2","area":"梁宝寺煤矿","lat":35.538823,"lng":116.235921,"address":"山东肥城","time":"2021/6/7","msg":"发生微震大能量事件"},
          {
              id:"O1",
              "time":"2021/6/11",
              "msg":"内蒙古鄂尔多斯伊金霍洛旗发生3.0级地震，结合该地区微震大能量事件及地压冲击历史，请区域内矿井注意防范",
              "address":"鄂尔多斯市伊金霍洛旗",
              "lat":"39.605457",
              "lng":"109.780461",
              "zjyx":"1县",
              "jjyx":"2县",
              "mk":"红庆河煤矿、石拉乌素煤矿、营盘壕煤矿",
              "num":"450"
            },
            {
              id:"O2",
              "time":"2021/7/9",
              "msg":"山东临沂发生2.4级地震，结合该地区微震大能量事件及地压冲击历史，请区域内矿井注意防范",
              "address":"山东临沂",
              "lat":"35.136889",
              "lng":"118.356063",
              "zjyx":"1县",
              "jjyx":"2县",
              "mk":"滕东煤业、田陈煤矿、七五煤业",
              "num":"600"
            }
      ],
      tlks_list:{
        "O1":['红庆河煤矿','石拉乌素煤矿','营盘壕煤矿'],
        "O2":['滕东煤业','田陈煤矿','七五煤业'],
      },
      tlks_listDefault:['红庆河煤矿','石拉乌素煤矿','营盘壕煤矿','滕东煤业','田陈煤矿','七五煤业'],
      mapJson:[],
      activeID:"",
      mapObj:{
        "dz":[
          {"id":1,"area":"青海","address":"海西州茫崖市","lat":38.14,"lng":93.81,"level":5.8,"time":"2021年6月16日16时48分","msg":"青海海西州茫崖市发5.8级地震"},
          {"id":2,"area":"云南","address":"楚雄州双柏县","lat":24.34,"lng":101.91,"level":5.1,"time":"2021年6月10日19时46分","msg":"云南楚雄州双柏县发生5.1级地震"},
          {"id":3,"area":"云南","address":"德宏州盈江县","lat":24.96,"lng":97.89,"level":"5.0 ","time":"2021年6月12日18时0分","msg":"云南德宏州盈江县发生5级地震"},
          {"id":4,"area":"青海","address":"果洛州玛多县","lat":34.74,"lng":98,"level":4.9,"time":"2021年7月8日21时23分","msg":"青海果洛州玛多县发生4.9级地震"},
          {"id":5,"area":"新疆","address":"阿克苏地区库车市","lat":41.12,"lng":83.45,"level":4.7,"time":"2021年6月25日9时42分","msg":"新疆阿克苏地区库车市发生4.7级地震"},
          {"id":6,"area":"新疆","address":"阿克苏地区温宿县","lat":41.65,"lng":81.01,"level":4.6,"time":"2021年7月8日21时5分","msg":"新疆阿克苏地区温宿县发生4.6级地震"},
          {"id":7,"area":"云南","address":"楚雄州双柏县","lat":24.31,"lng":101.89,"level":4.6,"time":"2021年6月28日19时48分","msg":"云南楚雄州双柏县发生4.6级地震"},
          {"id":8,"area":"新疆","address":"伊犁州昭苏县","lat":43.18,"lng":81.53,"level":4.5,"time":"2021年7月2日9时15分","msg":"新疆伊犁州昭苏县发生4.5级地震"},
          {"id":9,"area":"青海","address":"果洛州玛沁县","lat":34.47,"lng":99.02,"level":4.4,"time":"2021年7月7日15时27分","msg":"青海果洛州玛沁县发生4.4级地震"},
          {"id":10,"area":"云南","address":"昭通市威信县","lat":28.05,"lng":104.99,"level":4.2,"time":"2021年7月7日4时19分","msg":"云南昭通市威信县发生4.2级地震"},
          {"id":11,"area":"云南","address":"楚雄州双柏县","lat":24.33,"lng":101.91,"level":4.2,"time":"2021年6月16日15时35分","msg":"云南楚雄州双柏县发生4.2级地震"},
          {"id":12,"area":"青海","address":"果洛州玛沁县","lat":34.5,"lng":98.95,"level":4.1,"time":"2021年7月7日18时1分","msg":"青海果洛州玛沁县发生4.1级地震"},
          {"id":13,"area":"青海","address":"果洛州玛多县","lat":34.68,"lng":98.28,"level":"4.0 ","time":"2021年7月6日9时50分","msg":"青海果洛州玛多县发生4级地震"},
          {"id":14,"area":"四川","address":"甘孜州石渠县","lat":32.92,"lng":99.02,"level":"4.0 ","time":"2021年7月5日5时48分","msg":"四川甘孜州石渠县发生4级地震"},
          {"id":15,"area":"青海","address":"果洛州玛多县","lat":34.8,"lng":97.55,"level":"4.0 ","time":"2021年6月15日12时0分","msg":"青海果洛州玛多县发生4级地震"},
          {"id":16,"area":"新疆","address":"阿克苏地区库车市","lat":42.07,"lng":83.62,"level":3.9,"time":"2021年7月2日7时8分","msg":"新疆阿克苏地区库车市发生3.9级地震"},
          {"id":17,"area":"河北","address":"张家口市张北县","lat":41.17,"lng":114.41,"level":3.9,"time":"2021年6月22日11时14分","msg":"河北张家口市张北县发生3.9级地震"},
          {"id":18,"area":"青海","address":"果洛州玛多县","lat":34.83,"lng":97.51,"level":3.9,"time":"2021年6月12日20时48分","msg":"青海果洛州玛多县发生3.9级地震"},
          {"id":19,"area":"新疆","address":"阿克苏地区沙雅县","lat":41.12,"lng":83.55,"level":3.8,"time":"2021年6月25日12时57分","msg":"新疆阿克苏地区沙雅县发生3.8级地震"},
          {"id":20,"area":"四川","address":"绵阳市江油市","lat":32.2,"lng":104.94,"level":3.8,"time":"2021年6月23日5时11分","msg":"四川绵阳市江油市发生3.8级地震"},
          {"id":21,"area":"云南","address":"普洱市澜沧县","lat":22.65,"lng":100.33,"level":3.8,"time":"2021年6月20日11时31分","msg":"云南普洱市澜沧县发生3.8级地震"},
        ],
        "wz":[
            {"id":"w1","area":"郭家河煤矿","lat":34.865332,"lng":107.549773,"address":"陕西宝鸡市","time":"2019/5/20","msg":"发生微震大能量事件"},
            {"id":"w2","area":"梁宝寺煤矿","lat":35.538823,"lng":116.235921,"address":"山东肥城","time":"2021/6/7","msg":"发生微震大能量事件"},
            {"id":"w3","area":"门克庆煤矿","lat":35.01504,"lng":116.687359,"address":"内蒙古鄂尔多斯市","time":"2018/4/2","msg":"发生微震大能量事件"},
            {"id":"w4","area":"红阳三矿","lat":41.506184,"lng":123.244475,"address":"陕西辽阳市","time":"2019/3/1","msg":"发生微震大能量事件"},
        ],
        "oh":[
          {
              id:"O1",
              "time":"2021/6/11",
              "msg":"内蒙古鄂尔多斯伊金霍洛旗发生3.0级地震，结合该地区微震大能量事件及地压冲击历史，请区域内矿井注意防范",
              "address":"鄂尔多斯市伊金霍洛旗",
              "lat":"39.605457",
              "lng":"109.780461",
              "zjyx":"1县",
              "jjyx":"2县",
              "mk":"红庆河煤矿、石拉乌素煤矿、营盘壕煤矿",
              "num":"450"
            },
            {
              id:"O2",
              "time":"2021/7/9",
              "msg":"山东临沂兰陵县发生2.2级地震，结合该地区微震大能量事件及地压冲击历史，请区域内矿井注意防范",
              "address":"山东临沂",
              "lat":"35.136889",
              "lng":"118.356063",
              "zjyx":"1县",
              "jjyx":"2县",
              "mk":"滕东煤业、田陈煤矿、七五煤业",
              "num":"600"
            }
          ]
      },
      tableData:[],
      tableData1:[
            {
              "time":"2020-05-31 13:23:44",
              "level":"3",
              "lat":"34.66",
              "lng":"117.89",
              "deep":"0",
              "address":"山东临沂市兰陵县（塌陷）"
            },
            {
              "time":"2019-12-28 21:08:15",
              "level":"2.9",
              "lat":"34.78",
              "lng":"118.09",
              "deep":"0",
              "address":"山东临沂市兰陵县(塌陷）"
            },
            {
              "time":"2018-04-11 19:53:36",
              "level":"3.1",
              "lat":"35.62",
              "lng":"117.76",
              "deep":"10",
              "address":"山东临沂市平邑县"
            },
            {
              "time":"2016-03-27 12:12:57",
              "level":"3.1",
              "lat":"35.57",
              "lng":"117.69",
              "deep":"0",
              "address":"山东临沂市平邑县(塌陷)"
            },
            {
              "time":"2016-01-08 00:38:19",
              "level":"3.1",
              "lat":"34.96",
              "lng":"118.58",
              "deep":"9",
              "address":"山东临沂市临沭县"
            },
             {
              "time":"2021-03-18 10:10:57",
              "level":"3.1",
              "lat":"39.04",
              "lng":"110.62",
              "deep":"0",
              "address":"陕西榆林市神木市(塌陷)"
            },
            {
              "time":"2021-03-11 02:18:06",
              "level":"3.2",
              "lat":"39.08",
              "lng":"110.23",
              "deep":"0",
              "address":"陕西榆林市神木市（塌陷）"
            },
            {
              "time":"2021-01-23 10:59:00",
              "level":"3.8",
              "lat":"40.44",
              "lng":"110.24",
              "deep":"10",
              "address":"内蒙古鄂尔多斯市达拉特旗"
            },
            {
              "time":"2020-12-26 18:44:38",
              "level":"3.6",
              "lat":"40.33",
              "lng":"109.27",
              "deep":"15",
              "address":"内蒙古鄂尔多斯市达拉特旗"
            },
            {
              "time":"2020-12-15 07:55:38",
              "level":"2.6",
              "lat":"38.5",
              "lng":"109.78",
              "deep":"0",
              "address":"陕西榆林市榆阳区(塌陷)"
            },
            {
              "time":"2020-10-16 21:44:33",
              "level":"3.8",
              "lat":"40.67",
              "lng":"110.01",
              "deep":"22",
              "address":"内蒙古包头市九原区"
            },
            
          ],
      active:"dz",
      historyObj:{
        "O2":[
            {
              "time":"2020-05-31 13:23:44",
              "level":"3",
              "lat":"34.66",
              "lng":"117.89",
              "deep":"0",
              "address":"山东临沂市兰陵县（塌陷）"
            },
            {
              "time":"2019-12-28 21:08:15",
              "level":"2.9",
              "lat":"34.78",
              "lng":"118.09",
              "deep":"0",
              "address":"山东临沂市兰陵县(塌陷）"
            },
            {
              "time":"2018-04-11 19:53:36",
              "level":"3.1",
              "lat":"35.62",
              "lng":"117.76",
              "deep":"10",
              "address":"山东临沂市平邑县"
            },
            {
              "time":"2016-03-27 12:12:57",
              "level":"3.1",
              "lat":"35.57",
              "lng":"117.69",
              "deep":"0",
              "address":"山东临沂市平邑县(塌陷)"
            },
            {
              "time":"2016-01-08 00:38:19",
              "level":"3.1",
              "lat":"34.96",
              "lng":"118.58",
              "deep":"9",
              "address":"山东临沂市临沭县"
            },
            
          ],
        "O1":[
            {
              "time":"2021-03-18 10:10:57",
              "level":"3.1",
              "lat":"39.04",
              "lng":"110.62",
              "deep":"0",
              "address":"陕西榆林市神木市(塌陷)"
            },
            {
              "time":"2021-03-11 02:18:06",
              "level":"3.2",
              "lat":"39.08",
              "lng":"110.23",
              "deep":"0",
              "address":"陕西榆林市神木市（塌陷）"
            },
            {
              "time":"2021-01-23 10:59:00",
              "level":"3.8",
              "lat":"40.44",
              "lng":"110.24",
              "deep":"10",
              "address":"内蒙古鄂尔多斯市达拉特旗"
            },
            {
              "time":"2020-12-26 18:44:38",
              "level":"3.6",
              "lat":"40.33",
              "lng":"109.27",
              "deep":"15",
              "address":"内蒙古鄂尔多斯市达拉特旗"
            },
            {
              "time":"2020-12-15 07:55:38",
              "level":"2.6",
              "lat":"38.5",
              "lng":"109.78",
              "deep":"0",
              "address":"陕西榆林市榆阳区(塌陷)"
            },
            {
              "time":"2020-10-16 21:44:33",
              "level":"3.8",
              "lat":"40.67",
              "lng":"110.01",
              "deep":"22",
              "address":"内蒙古包头市九原区"
            },
            
          ]
      },
      numObj:{
        "O1":{
            "a":1,
            "b":2,
            "c":3,
            "d":450
        },
         "O2":{
            "a":1,
            "b":2,
            "c":3,
            "d":600
        },
      },
      ohNum:{
        "a":2,
        "b":4,
        "c":6,
        "d":1050
      }
    }
  },
  methods:{
    rowClick(row){
      console.log(row)
      this.activeID=row.id;
      this.vm.$refs.dycjzhyjMap.markerClick(row,true)
    },
    tableRowClassName({row, rowIndex}){
      if (rowIndex% 2==0) {
        return 'tableBg';
      } else {
        return '';
      }
    },
    defaultOh(){
      this.ohNum={
        "a":2,
        "b":3,
        "c":6,
        "d":1050
      };
      this.tlks_listDefault=['红庆河煤矿','石拉乌素煤矿','营盘壕煤矿','滕东煤业','田陈煤矿','七五煤业'];
      console.log(this.numObj)

    },
    filterMapJson(type){
        this.active=type
        this.activeID="";
        this.tableData1=this.mapObj[type]
        this.tableData=this.mapObj[type]
        this.ssjs_list=this.mapObj[type]
    },
    filterJson(id){
      this.tableData1=this.historyObj[id];
      this.ohNum=this.numObj[id];
      this.tlks_listDefault=this.tlks_list[id];
    }
  },
  mounted() {
    // this.tableData1=this.mapObj[this.active]
    this.tableData=this.mapObj[this.active]
    this.ssjs_list=this.mapObj[this.active]
  }
}
</script>
<style scoped>
.left_panel .top_panel{
  height: 16vh;
  padding: 2vh 0.5vw 1vh 0.5vw;
  width: calc(100% - 2vw);
  background:url('/vae/images/panel_bg2.png')no-repeat;
  background-size: 100% 100%;
  -webkit-background-size: 100% 100%;
  -o-background-size: cover;
  background-position: center 0;
}
.left_panel .top_panel img{width:4vw;margin-left:0.8vw}
.top_label{
  color:#fff;line-height: 5vh;font-size:1vh;text-align: center;
}
.top_num{color:#1eeaf1;line-height: 2vh;font-size:2.4vh;text-align: center;}
.left_panel .top_panel span{}
.left_panel .btm_panel{
  height:calc(100% - 2.5vh);
  width: calc(100% - 2vw);
  padding: 2vh 0.5vw 1vh 0.5vw;
  background:url('/vae/images/panel_bg.png')no-repeat;
  background-size: 100% 100%;
  -webkit-background-size: 100% 100%;
  -o-background-size: cover;
  background-position: center 0;
}
.panel-title{
  width: 100%;
  height: 3vh;
  font-size: 1.6vh;
  line-height: 3vh;
  color: #fff;
  text-align: center;
}
.panel-title b{
  display: inline-block;
  width: 2vh;
  height: 2vh;
  background: url("/vae/images/zuo.png") no-repeat;
  background-size: contain;
  vertical-align: middle;
}
.panel-title i{
  display: inline-block;
  width: 2vh;
  height: 2vh;
  background: url("/vae/images/you.png") no-repeat;
  background-size: contain;
  vertical-align: middle;
}
.btm_panel .cont_panel{
  min-height: 10.8vh;
  max-height: 20vh;
  margin:0.9vh;
  color:#fff;
  background: url("/vae/images/tiao-1.png") no-repeat;
  background-size: 100% 100%;
  -webkit-background-size: 100% 100%;
  -o-background-size: cover;
  background-position: center 0;
  display: flex;
  align-items: center;
  justify-content: center
}
.cont_panel:hover{
  background: url("/vae/images/tiao-2.png") no-repeat;
  background-size: 100% 100%;
  -webkit-background-size: 100% 100%;
  -o-background-size: cover;
  background-position: center 0;
}
.cont_panel.active{
  background: url("/vae/images/tiao-2.png") no-repeat;
  background-size: 100% 100%;
  -webkit-background-size: 100% 100%;
  -o-background-size: cover;
  background-position: center 0;
}
.cont_panel .lft_img{
  height: 6vh;
  width: 6vh;
  margin: 1vh 0;
  background: url("/vae/images/jingdeng.gif") no-repeat;
  background-size: 100% 100%;
  -webkit-background-size: 100% 100%;
  -o-background-size: cover;
  background-position: center 0;
  float: left;
}
.cont_panel .ct_panel{
  /* height: 8vh; */
  width: calc(100% - 6vh);
  float:left;
}

.ct_panel .title{
  color:#21ECF9;
  font-size:0.8vw;
  padding:0.5vh 0;
}
.ct_panel .ctitle{
  color:#fff;
  font-size:0.6vw;
}

.right_panel{
  background:url('/vae/images/md_panel_bg.png')no-repeat;
  background-size: 100% 100%;
  -webkit-background-size: 100% 100%;
  -o-background-size: cover;
  background-position: center 0;
}
.right_panel .top_panel{
  width: calc(100% - 1vw);
  margin: 0 auto;
  height: 16vh;
  margin-top: 6vh;
  -o-background-size: cover;
  background-position: center 0;
  box-sizing: border-box;
}
.right_panel .cont_panel{
  height:63vh;
  width:calc(100% - 0.2vw);
  margin-left:0.1vw;
  background: url("/vae/images/bj2.png") no-repeat;
  background-size: 100% 100%;
  -webkit-background-size: 100% 100%;
  -o-background-size: cover;
  background-position: center 0;
}
/* .right_panel .cont_panel .el-table{
  width: calc(100% - 0.1vw);
  height: 62vh;
  margin: 0 0.05vw;
} */
  /* .right_panel .cont_panel .el-table >>>.el-table__body-wrapper{
      overflow: auto;
      position: relative;
      height: 57vh;
  } */
</style>
<style lang="less">
.right_panel{
  padding: 0 0.5vw;
  box-sizing: border-box;
  .oh.el-table{
    width: calc(100% - 0.1vw);
    height: 33vh;
    margin: 0 0.05vw;
   .el-table__body-wrapper.is-scrolling-left{
        overflow: auto;
        position: relative;
        height: 32vh;
    }

  }
  .wz.el-table{
    width: calc(100% - 0.1vw);
    height: 79vh;
    margin: 0 0.05vw;
   .el-table__body-wrapper.is-scrolling-none{
        overflow: auto;
        position: relative;
        height: 75vh;
    }

  }
  .dz.el-table{
      height: 62vh;
      width: calc(100% - 0.1vw);
      margin: 0 0.05vw;
     .el-table__body-wrapper{
          height:57vh;
          overflow: auto;
         position: relative;
      }
  }
  .right_title{position: relative;color: #fff;font-size: 1.6vh;top: 0.8vh;width: 100%;text-align: center;}

  .cjdy_right_panel{
    width: 100%;
    height: 100%;
    .box{
      width: 20%;
      display: inline-block;
      text-align: center;
      padding: 0 0.5vw;
      box-sizing: border-box;
      .bg{
        width: 100%;
        text-align: center;
        height: 6vh;
        line-height: 6vh;
        background: url("../../public/images/cjdy_bg2.png") no-repeat;
        background-size: 100% 100%;
        color: #40E6FE;
        font-size: 2vh;
        span{
          font-size: 1vh;
        }
      }
      .text{
        font-size: 1vh;
        color: #fff;
        padding-top: 2vh;
      }
    }

  }
  .cont_panel{
    .mapTable{
      background: #091C68;
        color: #fff;
      th{
        border-bottom: 0;
        background: #0045E7;
        padding: 1vh 0;
        .cell{
          color: #fff;
        }
      }

      tr{
        background: transparent;
        td{
          border-bottom: 1px solid transparent;
          padding:1.3vh 0;
        }
      }
      tr.tableBg{
        background: #030E51;
      }
      tr:hover{
        background: url("../../public/images/Tai_tiao.png") no-repeat;
        background-size: 100% 100%;
        td{
          background:transparent;
        }
      }

    }
    .mapTable1{
       th{  padding: 0.5vh 0 !important;  }
       td{  padding:0.7vh 0 !important; }
    }
  }
  .echart-panel{
      height: 28vh;
      width: 92%;
      margin: 0 auto;
      padding: 0.5vh;
      margin-top: 1vh;
      background: url("../../public/images/bj1.png") no-repeat;
      background-size: 100% 100% !important;
      box-sizing: border-box;
      .panel-title{
        font-size: 1.6vh;
        line-height: 2vh;
        text-align: center;
        margin-top: 1vh;
        color: #fff;
        b{
          display: inline-block;
          width: 2vh;
          height: 2vh;
          background: url("../../public/images/zuo.png") no-repeat;
          background-size: contain;
          vertical-align: middle;
        }
        i{
          display: inline-block;
          width: 2vh;
          height: 2vh;
          background: url("../../public/images/you.png") no-repeat;
          background-size: contain;
          vertical-align: middle;
        }
      }
      .panel-content{
        height: calc(100% - 4vh);
        .listPanel{
          height: 100%;
          padding: 0 1vw;
          .listRow{
            background: url("../../public/images/bj.png");
            background-size: 100% 100%;
            height: 1vh;
            width: calc(93%);
            color: #fff;
            font-size: 1.4vh;
            line-height: 2vh;
            padding: 0.6vh;
            margin: 0.6vh 0;
            line-height: 1vh;
          }
        }
      }
    }
}
</style>
